<template>
	<view class="main-page">
		<view class="header-box" :style="{'backgroundColor' : bgColor}">
			<view class="title-box">
				<image class="back-ic" src="../../static/common/ic_back_white.png" 
				@click="goBack" v-if="allServiceList.length > 0"></image>
				<image class="back-ic" src="../../static/common/ic_back.png"
				@click="goBack" v-else></image>
				
				<text class="font-fff-36 font-weight-600" v-if="allServiceList.length > 0">服务项目</text>
				<text class="font-333-36 font-weight-600" v-else>服务项目</text>
			</view>
		</view>
		<view class="header-bg" v-if="allServiceList.length > 0"></view>
		
		<view class="content-box" v-if="allServiceList.length > 0">
			<view class="row-container-row-between width-100p mb-30">
				<text class="font-fff-36 font-weight-600">所有服务</text>
				<view class="row-container-center add-service" @click="showAddWindow = true">
					<image class="wh-36" src="../../static/common/ic_add.png"></image>
					<text class="font-fff-28 font-weight-600">添加服务大类</text>
				</view>
			</view>
		
			<view class="data-item" v-for="(item , index) in allServiceList" :key="index">
				<view class="row-container-row-between width-100p">
					<view class="row-container">
						<view class="line"></view>
						<text class="font-333-32 font-weight-600">{{item.itemName}}</text>
					</view>
					<view class="grow-text row-container-center" @click="handleClickIsOpen(item)">
						<image class="switch-ic" v-if="item.status == 0"
						 src="../../static/common/ic_switch_open.png"></image>
						<image class="switch-ic" v-else
						 src="../../static/common/ic_switch_close.png"></image>
					</view>
				</view>
				<view class="divider"></view>
				<view class="row-container-row-between width-100p mt-24"
					v-for="(childItem,childIndex) in item.childList" :key="childIndex">
					<view class="row-container width-25p">
						<text class="font-333-28 font-weight-600">{{childItem.itemName}}</text>
					</view>
					<view class="row-container-center width-25p">
						<text class="font-666-28">{{childItem.price}}</text>
					</view>
					<view class="row-container-center width-25p"  @click="handleClickEdit(childItem)">
						<image class="wh-44" src="../../static/common/ic_edit_black.png"></image>
					</view>
					<view class="row-container-end"  @click="handleClickIsOpen(childItem)">
						<image class="switch-ic" v-if="childItem.status == 0"
						 src="../../static/common/ic_switch_open.png"></image>
						<image class="switch-ic" v-else
						 src="../../static/common/ic_switch_close.png"></image>
					</view>
				</view>
				
				<view class="row-container-row-between width-100p mt-30">
					<text class="grow-btn mr-12" @click="handleClickEdit(item)">编辑服务大类</text>
					<view class="grow-btn ml-12 row-container-center" @click="handleClickAddChild(item)">
						<image class="wh-28 mr-10" src="../../static/common/ic_add_grey.png"></image>
						<text class="font-333-28">添加子服务</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="column-container-center width-100p" v-else>
			<NoData class="width-100p" style="margin-top: 400rpx;" hint="您还没有添加服务项目，快去添加吧"></NoData>
			<view class="row-container-center center-add-service" @click="showAddWindow = true">
				<image class="wh-36" src="../../static/common/ic_add.png"></image>
				<text class="font-fff-36 font-weight-600">添加服务大类</text>
			</view>
		</view>
		
		<!-- 停用启用确认弹窗 -->
		<view class="window-main" v-show="showOpenWindow">
			<view class="reset-window">
				<text class="font-333-36 font-weight-600">{{clickOpenData.status == 0 ? '确认停用吗？' : '确认启用吗？'}}</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-btn" @click="showOpenWindow = false">取消</text>
					<text class="confirm-btn" @click="changeIsOpen">确定</text>
				</view>
			</view>
		</view>
		
		<!-- 点击修改服务大类弹窗 -->
		<view class="window-main" v-if="showAddWindow">
			<view class="add-bed-window">
				<text class="font-333-36 font-weight-600">{{editServiceId ? '修改服务大类' : '添加服务大类'}}</text>
				<view class="row-container mt-40 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">名称</text>
				</view>
				
				<input 
					v-model="addName"
					class="add-bed-input"
					placeholder="请输入服务名称"
					placeholder-class="font-999-32"
					maxlength="10"
				/>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="add-cancel" @click="handleCloseAddWindow">取消</text>
					<text :class="{'add-confirm-negative' : !addName , 'add-confirm' : addName}"
					@click="handleAddService">确定</text>
				</view>
			</view>
		</view>
		
		<!-- 添加修改子服务弹窗 -->
		<view class="window-main" v-if="showAddChildWindow">
			<view class="add-bed-window">
				<text class="font-333-36 font-weight-600">{{editServiceId ? '修改子服务' : '添加子服务'}}</text>
				<view class="row-container mt-40 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">子服务名称</text>
				</view>
				<input 
					v-model="addName"
					class="add-bed-input"
					placeholder="请输入服务名称"
					placeholder-class="font-999-32"
					maxlength="10"
				/>
				
				<view class="row-container mt-40 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">子服务金额</text>
				</view>
				<input
					v-model="price"
					class="add-bed-input"
					placeholder="请输入项目金额"
					placeholder-class="font-999-32"
					maxlength="10"
					type="digit"
				/>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="add-cancel" @click="handleCloseAddWindow">取消</text>
					<text class="add-confirm" v-if="addName && price"
					@click="handleAddService">确定</text>
					<text class="add-confirm-negative" v-else>确定</text>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import NoData from '../../components/nodata.vue'
	
	export default {
		data() {
			return {
				allServiceList:[],
				showOpenWindow:false,
				clickOpenData:null,
				
				showAddWindow:false,
				showAddChildWindow:false,
				addName:'' , // 添加或修改的服务项名称
				editServiceId:'' , // 修改的服务项名称
				price:'' , // 子服务价格
				clickParentId:'' , // 父级id
			}
		},
		
		computed:{
			bgColor:function(){
				return this.allServiceList.length > 0 ? '#F94C4B' : '#FFFFFF'
			}
		},
		
		components:{
			NoData
		},
		
		onPullDownRefresh() {
			this.loadAllServiceList()
		},
		
		onLoad() {
			this.loadAllServiceList()
		},
		
		methods: {
			goBack(){
				uni.navigateBack()
			},
			
			handleClickIsOpen(item){
				this.clickOpenData = item
				this.showOpenWindow = true
			},
			
			loadAllServiceList(){
				let that = this
				this.http({
					url:'/user/item/findServiceItemList',
					method:'POST',
					data:{
						'status':-1
					},
					success(res){
						if (res.code == 200){
							that.allServiceList = res.data
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
				
			},
			
			//点击修改
			handleClickEdit(item){
				this.editServiceId = item.id
				this.addName = item.itemName
				this.clickParentId = item.parentId
				if (item.parentId){
					this.showAddChildWindow = true
					this.price = item.price
				} else{
					this.showAddWindow = true
				}
			},
			
			//添加或修改服务项目
			handleAddService(){
				if (!this.addName) return
				let that = this
				
				let params = {itemName:this.addName , itemId:this.editServiceId}
				if (this.clickParentId){
					this.$set(params , "parentId" , this.clickParentId)
				}
				if (this.price){
					this.$set(params , 'price' , this.price)
				}
				
				
				this.http({
					url:"/user/item/saveOrUpdateServiceItem",
					method:"POST",
					data:params,
					success(data){
						if (data.code == 200){
							that.showAddWindow = false
							that.showAddChildWindow = false
							that.addName = ""
							that.editServiceId = ""
							that.clickParentId = ""
							that.price = ""
							that.loadAllServiceList()
						}
						setTimeout(()=>{
							uni.showToast({
								title:data.msg,
								icon:'none'
							})
						},500)
					},
					failed(e){
						
					}
				})
			},
			
			//修改启用状态
			changeIsOpen(){
				if (!this.clickOpenData) return
				let that = this
				let type = 0
				if (this.clickOpenData.status == 0){
					type = 1
				}
				this.http({
					url:"/user/item/updateItemStatus",
					method:"POST",
					data:{
						itemId : this.clickOpenData.id,
						type : type,
					},
					success(data){
						if (data.code == 200){
							that.clickOpenData = null
							that.showOpenWindow = false
							that.loadAllServiceList()
						}
					},
					failed(e){
						
					}
				})
			},
			
			handleCloseAddWindow(){
				this.editServiceId = ""
				this.addName = ""
				this.clickParentId = ""
				this.showAddWindow = false
				this.showAddChildWindow = false
			},
			
			//点击添加子服务项
			handleClickAddChild(item){
				this.clickParentId = item.id
				this.showAddChildWindow = true
			}
			
		}
	}
</script>

<style lang="scss">
	.header-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 176rpx;
		position: fixed;
		top: 0;
		z-index: 100;
		
		.title-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 88rpx;
			position: relative;
			margin-top: 88rpx;
			
			.back-ic{
				width: 64rpx;
				height: 64rpx;
				padding: 0rpx 22rpx;
				position: absolute;
				left: 0;
			}
		}
	}
	
	.header-bg{
		width: 100%;
		height: 284rpx;
		background: linear-gradient(180deg, #F94C4B 66.15%, rgba(249, 76, 75, 0) 100%);
		position: fixed;
		top: 176rpx;
		z-index: 80;
	}
	
	.center-add-service{
		background: #F94C4B;
		padding: 22rpx 58rpx;
		border-radius: 10rpx;
		margin-top: 80rpx;
	}
	
	.content-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 60rpx);
		margin: 206rpx 30rpx 0rpx 30rpx;
		z-index: 90;
		
		.add-service{
			padding: 15rpx 20rpx;
			background: rgba(255, 255, 255, 0.1);
			border: 1rpx solid #FFFFFF;
			border-radius: 10rpx;
		}
	}
	
	.data-item{
		display: flex;
		flex-direction: column;
		width: calc(100% - 48rpx);
		padding: 24rpx;
		background: white;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		position: relative;
		
		.line{
			width: 7rpx;
			height: 30rpx;
			background: linear-gradient(180deg, #EA3D3D 0%, rgba(234, 61, 61, 0) 100%);
			margin-right: 8rpx;
		}
		
		.divider{
			width: 100%;
			height: 1rpx;
			margin-top: 24rpx;
			background: #E8E8E8;
		}
		
		.switch-ic{
			width: 79rpx;
			height: 45rpx;
		}
		
		.grow-btn{
			text-align: center;
			flex-grow: 1;
			height: 72rpx;
			line-height: 72rpx;
			flex-shrink: 0;
			background: #F5F5F5;
			border-radius: 10rpx;
			color: #333333;
			font-size: 28rpx;
		}
		
	}
	
	.reset-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 190rpx);
		margin: 0rpx 70rpx;
		padding: 40rpx 25rpx;
		background: white;
		border-radius: 30rpx;
		
		.cancel-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: #333333;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
		
		.confirm-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F94C4B;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
	}
	
	
	.add-bed-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 218rpx);
		margin: 0rpx 69rpx;
		padding: 40rpx;
		background: white;
		border-radius: 30rpx;
		
		.add-bed-input{
			width: calc(100% - 48rpx);
			height: 87rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-top: 14rpx;
			margin-bottom: 8rpx;
			padding: 0rpx 24rpx;
			color: #333333;
			font-size: 32rpx;
		}
		
		.add-cancel{
			width: 200rpx;
			height: 85rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin-right: 30rpx;
			text-align: center;
			line-height: 85rpx;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.add-confirm{
			flex-grow: 1;
			height: 85rpx;
			border-radius: 10rpx;
			background: #F94C4B;
			text-align: center;
			line-height: 85rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.add-confirm-negative{
			flex-grow: 1;
			height: 85rpx;
			border-radius: 10rpx;
			background: #F94C4B;
			text-align: center;
			line-height: 85rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
			opacity: 0.5;
		}
	}
	
</style>
